<!-- 首页信息 -->
<template>
  <div class="info-page">
    <Toolbar>
      <Text> 首页信息{{ version }}</Text>
      <Icon type="icon-star" />
      <qv-icon type="icon-star" />
    </Toolbar>

    <Poptip v-if="the.date.isShow"
            style="margin-top: 4rem;margin-left:2.5rem;"
            float>
      <DatePanel v-model="the.date.now"
                 type="datetime"
                 @onEvent="onDateEvent" />
    </Poptip>

    <Card :styles="'padding: 0.1rem;'">
      <template #title>
        <DateBar :start="the.date.start"
                 :now="the.date.now"
                 :marks="the.date.marks"
                 @onEvent="onDateEvent" />
      </template>
      <!--卡片右上角-->
      <template #extra>
        <Button size="small"
                shape="circle"
                icon="icon-suo"
                @click="btnEvent" />
      </template>

      今日：{{the.date.now}}
    </Card>

    <Card>
      <template #title>
        <DatePanel v-model="the.date.now"
                   type="datetime"
                   :marks="the.date.marks"
                   style="z-index:0"
                   @onEvent="onDateEvent" />
      </template>
      <!--卡片右上角 -->
      <template #extra>
        <Button size="large"
                shape="circle"
                icon="icon-jiantou"
                @click="btnEvent" />
        <Button size="small"
                shape="circle"
                icon="icon-jiantou"
                @click="btnEvent" />
      </template>

      dddd
    </Card>

    <Card>
      <template #title>
        <p>
          <Icon type="icon-star" />
          今天报告
        </p>
      </template>
      <!--卡片右上角-->
      <template #extra>
        <Button size="small"
                shape="circle"
                icon="icon-suo"
                @click="btnEvent" />
      </template>

      dddd
    </Card>

    <button @click="the.show.test = !the.show.test">
      Toggle
    </button>
    <transition name="fade">
      <p v-if="the.show.test"
         key="1">hello</p>
      <p v-else
         key="2">你好</p>
    </transition>
    <div class="ui-css-page">
      主题配置方案：config.less
      <Row :gutter="16">
        <Col span="8"
             gutter="4rem">
        <span class="primary">主色调 #0088ff</span>

        </Col>
        <Col span="16">
        <span v-for="(item, key) in theme.color"
              :class="key"
              :key="key"
              :style="'background:'+item.color">{{ item.text }} {{item.color}}</span>
        <div>
          <dl>
            <dt>文字背景</dt>
            <dd v-for="(item, index) in theme.font"
                :key="index"
                :style="'background:'+item.color">{{ item.text }} qcf-{{index}} {{item.color}}</dd>
          </dl>

          <dl>
            <dt>文字</dt>
            <dd v-for="(item, index) in theme.font"
                :key="index"
                :style="'color:'+item.color">{{ item.text }} qcf-{{index}} {{item.color}}</dd>
          </dl>
        </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { version } from '../../components/'
import { reactive, ref } from 'vue'
export default {
  setup (props, context) {

    /** 组件状态 */
    const the = reactive({
      show: {
        test: false
      },
      date: {
        isShow: false,
        value: '',
        start: new Date(),
        now: new Date().format('yyyy/MM/dd'), //null,// //,
        // 日期标记
        marks: {
          '2021-11-15': '99',
          '2021-11-18': true
        }
      }
    })

    const btnEvent = (cmd) => {
      console.log(cmd)

      switch (cmd) {
        case 'next':
          the.date.isShow = !the.date.isShow;
          break
      }
    }

    /** 监听日期事件 */
    const onDateEvent = (resp) => {
      console.log('onDateEvent', resp)

      switch (resp.cmd) {
        case 'day':
          the.date.start = resp.date
          break;
        case 'bind': //绑定日期列表
          if (resp.data.list) {
            let _one = resp.data.list[0].date;
            the.date.marks[_one] = true
            the.date.marks[resp.data.list[4].date] = 1
          }
          break;
        case 'click': //列表点击
          the.date.now = resp.data.date;
          break;
        case 'next':
          the.date.isShow = !the.date.isShow;
          // the.date.now = resp.data.date;
          break;
      }

    }

    // config.less 配置颜色
    const theme = {
      color: {
        success: { text: '成功  success', class: 'qc-2', color: '#00bb00' },
        info: { text: '信息 info', class: 'qc-3', color: '#00b9aa' },
        mark: { text: '标记 mark', class: 'qc-8', color: '#9933ff' },
        warning: { text: '警告 warning', class: 'qc-5', color: '#ff6600' },
        error: { text: '错误 error', class: 'qc-4', color: '#ee3000' },
        focus: { text: '焦点 focus', class: 'qc-6', color: '#7aafff' },
        hover: { text: '激活 hover', class: 'qc-7', color: '#7af2ff' }
      },
      font: [
        { text: '主标题 title-color', color: '#172333' },
        { text: '副标题 title-sub-color', color: '#23354d' },
        { text: '主文本3 text-color', color: '#355874' },
        { text: '副文本3 text-sub-color', color: '#607790' },
        { text: '文本4 legend-color', color: '#9999bb' },
        { text: '文本4 legend-sub-color', color: '#dee0f6' }
      ]
    };

    return { the, theme, version, btnEvent, onDateEvent }
  },
}

</script>
<style>
.info-page .qv-text {
  color: #23354d;
}
.info-page .qv-card {
  width: 18.5rem;
  margin-top: 0.25rem;
  margin-left: 0.25rem;
  display: inline-block;
  vertical-align: top;
}

.info-page .qv-date-panel {
  width: 100%;
}

.info-page .qk-date-bar {
  margin-right: 1rem;
  font-size: 0.8em;
}

.ui-css-page {
  margin: 0.5rem auto;
}

.ui-css-page .primary {
  height: 5rem;
  line-height: 5rem;
  display: block;
  background: #0088ff;
  margin: 0.25rem;
}

.ui-css-page span {
  font-size: 0.7rem;
  border-radius: 0.3rem;
  color: #fff;
  padding: 0.5rem;
  margin: 0.25rem 0 0 0.25rem;
  display: inline-block;
  text-align: center;
}

.ui-css-page dl {
  margin: 0.5rem;
  font-size: 0.7rem;
}

.ui-css-page dd {
  display: inline-block;
  color: #fff;
  padding: 1rem;
  margin: 0.1rem;
  border-radius: 0.3rem;
}
</style>